const withPromise = (wrapped, promiseFn) => {
  return {
    name: "width-promise",
    data() {
      return {
        loading: false,
        error: false,
        result: null,
      };
    },
    methods: {
      async request() {
        this.loading = true;
        // 从子组件实例里拿到数据
        const { requestParams } = this.$refs.wrapped;
        // 传递给请求函数
        const result = await promiseFn(requestParams).finally(() => {
          this.loading = false;
        });
        this.result = result;
      },
    },
    async mounted() {
      // 立刻发送请求，并且监听参数变化重新请求
      this.$refs.wrapped.$watch("requestParams", this.request.bind(this), {
        immediate: true,
        deep: true,
      });
    },
    render(h) {
      const args = {
        props: {
          result: this.result,
          loading: this.loading,
          // 混入 $attrs
          ...this.$attrs,
        },
        // 传递事件
        on: this.$listeners,

        // 传递 $scopedSlots
        scopedSlots: this.$scopedSlots,
        // 这里传个 ref，就能拿到子组件实例，和平常模板中的用法一样
        ref: "wrapped",
      };

      return h("div", [
        h(wrapped, args),
        this.loading ? h("span", ["加载中....."]) : null,
        this.error ? h("span", ["失败....."]) : null,
      ]);
    },
  };
};

export default withPromise;
